<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="arc" width="800" height="600"></canvas>
  <script src="../utils/index.js"></script>
  <script>
    const canvas = document.querySelector('#arc')
    const ctx = canvas.getContext('2d')
    init()

    // startInterval()

    function init() {
      drawCircle(20)
    }

    function drawCircle(lineWidth) {
      ctx.lineWidth = lineWidth
      ctx.beginPath()
      ctx.arc(200, 200, 100, 0, Math.PI * 2, false)
      ctx.strokeStyle = Lrt.randomColor1()
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(540, 200, 100, 0, Math.PI * 2, false)
      ctx.strokeStyle = Lrt.randomColor2()
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(370, 200, 100, 0, Math.PI * 2, false)
      ctx.strokeStyle = Lrt.randomColor3()
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(285, 347, 100, 0, Math.PI * 2, false)
      ctx.strokeStyle = Lrt.randomColor4()
      ctx.stroke()

      ctx.beginPath()
      ctx.arc(460, 347, 100, 0, Math.PI * 2, false)
      ctx.strokeStyle = Lrt.randomColor1()
      ctx.stroke()
      ctx.closePath()
    }

    function startInterval() {
      let count = 1
      setInterval(() => {
        count++
        if (count > 60) {
          count = 1
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        drawCircle(count)
      }, 1000);
    }
  </script>
</body>

</html>